<template>
  <div class="search-page">
    <!-- 搜索头部 -->
    <div class="search-header">
      <el-breadcrumb>
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>搜索结果</el-breadcrumb-item>
      </el-breadcrumb>

      <div class="search-info">
        <h2>
          <el-icon class="search-icon"><Search /></el-icon>
          搜索 "{{ keyword }}" 的结果
        </h2>
        <p class="result-count">
          找到 {{ articleStore.total }} 条相关结果
        </p>
      </div>
    </div>

    <!-- 搜索结果列表 -->
    <div class="search-results" v-loading="articleStore.loading">
      <template v-if="searchArticle.length">
        <el-card
            v-for="item in searchArticle"
            :key="item.article.id"
            class="result-item"
            shadow="hover"
        >
          <div class="result-content">
            <!-- 左侧图片 -->
            <div class="result-image" v-if="item.article.thumbnailUrl">
              <img
                  :src="item.article.thumbnailUrl"
                  @click="goToArticle(item.article.id)"
              >
            </div>

            <!-- 右侧内容 -->
            <div class="result-details">
              <h3 @click="goToArticle(item.article.id)" class="title">
                <span v-html="highlightKeyword(item.article.title)"></span>
              </h3>

              <p class="excerpt" v-if="item.article.leadParagraphs?.[0]">
                <span v-html="highlightKeyword(item.article.leadParagraphs[0])"></span>
              </p>
              <p class="excerpt" v-if="item.highlights">
                <span v-html="highlightKeyword(item.highlights.summary?.[0])"></span>
              </p>

              <div class="meta">
                <div class="meta-item">
                  <el-icon><User /></el-icon>
                  {{ item.article.author }}
                </div>
                <div class="meta-divider"></div>
                <div class="meta-item">
                  <el-icon><Calendar /></el-icon>
                  {{ formatDate(item.article.createTime) }}
                </div>
                <div class="meta-divider"></div>
                <div class="meta-item">
                  <el-icon><View /></el-icon>
                  {{ item.article.viewCount || 0 }} 阅读
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </template>

      <!-- 无结果状态 -->
      <el-empty
          v-else-if="!articleStore.loading"
          description="未找到相关结果"
      >
        <template #description>
          <p>未找到与 "{{ keyword }}" 相关的文章</p>
          <p class="empty-suggestions">建议：</p>
          <ul>
            <li>请检查输入是否正确</li>
            <li>尝试使用其他关键词</li>
            <li>使用更简短的搜索词</li>
          </ul>
        </template>
      </el-empty>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :total="articleStore.total"
            :page-sizes="[10, 20, 50]"
            layout="total, sizes, prev, pager, next"
            background
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useArticleStore } from '@/store/article'
import { Search, User, Calendar, View } from '@element-plus/icons-vue'
import dayjs from 'dayjs'

const route = useRoute()
const router = useRouter()
const articleStore = useArticleStore()
const keyword = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const searchArticle = ref([])

// 格式化日期
const formatDate = (date) => {
  return dayjs(date).format('YYYY-MM-DD HH:mm')
}

// 高亮关键词
const highlightKeyword = (text) => {
  if (!text || !keyword.value) return text
  const reg = new RegExp(keyword.value, 'gi')
  return text.replace(reg, match => `<em class="highlight">${match}</em>`)
}

// 跳转到文章详情
const goToArticle = (id) => {
  router.push(`/article/${id}`)
}

// 分页处理
const handleSizeChange = (val) => {
  pageSize.value = val
  search()
}

const handlePageChange = (val) => {
  currentPage.value = val
  search()
}

// 搜索
const search = async () => {
  if (keyword.value) {
    await articleStore.searchArticles(
        keyword.value,
        currentPage.value,
        pageSize.value
    )
    searchArticle.value = articleStore.searchResults
  }
}

// 监听路由参数变化
watch(
    () => route.query.keyword,
    (newKeyword) => {
      keyword.value = newKeyword
      currentPage.value = 1
      search()
    },
    { immediate: true }
)
</script>

<style scoped lang="scss">
.search-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px;
  background-color: #f5f5f5;
  min-height: calc(100vh - 64px); // 假设头部高度为64px
}

.search-header {
  margin-bottom: 24px;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

  .search-info {
    margin-top: 16px;

    h2 {
      display: flex;
      align-items: center;
      margin: 0 0 12px;
      font-size: 24px;
      color: #333;

      .search-icon {
        margin-right: 8px;
        font-size: 24px;
      }
    }
  }

  .result-count {
    color: #666;
    font-size: 14px;

    .search-time {
      margin-left: 12px;
      color: #999;
    }
  }
}

.result-item {
  margin-bottom: 16px;
  transition: transform 0.2s;
  border: none;

  &:hover {
    transform: translateY(-2px);
  }

  .result-content {
    display: flex;
    gap: 20px;
  }

  .result-image {
    flex: 0 0 180px;

    img {
      width: 180px;
      height: 120px;
      object-fit: cover;
      border-radius: 4px;
      cursor: pointer;
      transition: opacity 0.2s;

      &:hover {
        opacity: 0.9;
      }
    }
  }

  .result-details {
    flex: 1;
    display: flex;
    flex-direction: column;
  }

  .title {
    cursor: pointer;
    margin: 0 0 12px;
    font-size: 18px;
    line-height: 1.4;
    color: #333;

    &:hover {
      color: var(--el-color-primary);
    }
  }

  .excerpt {
    margin: 0 0 16px;
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .meta {
    margin-top: auto;
    display: flex;
    align-items: center;
    color: #999;
    font-size: 13px;

    .meta-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }

    .meta-divider {
      width: 1px;
      height: 12px;
      background-color: #dcdfe6;
      margin: 0 12px;
    }
  }
}

.empty-suggestions {
  margin: 16px 0 8px;
  color: #666;

  & + ul {
    padding-left: 20px;
    color: #666;

    li {
      margin: 4px 0;
    }
  }
}

.pagination {
  margin-top: 32px;
  padding: 20px 0;
  display: flex;
  justify-content: center;
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

:deep(.highlight) {
  color: var(--el-color-primary);
  font-weight: 500;
  padding: 0 2px;
}

// 响应式设计
@media (max-width: 768px) {
  .result-item {
    .result-content {
      flex-direction: column;
    }

    .result-image {
      margin-bottom: 16px;

      img {
        width: 100%;
        height: 200px;
      }
    }
  }
}
</style>
